<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>订单详情</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <!-- jquery -->
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <!-- bootstrap -->
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
        <!-- jquery-validator -->
        <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
        <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
        <!-- layer -->
        <script type="text/javascript" src="/layer/layer.js"></script>
        <!-- md5.js -->
        <script type="text/javascript" src="/js/md5.min.js"></script>
        <!-- common.js -->
        <script type="text/javascript" src="/js/common.js"></script>
    </head>
    <body>
        <!-- 引入公共头部 -->
        <div id="header"></div>
        <script>
            $("#header").load("/pages/common/head.htm")
        </script>
        <div class="panel panel-default">
            <div class="panel-heading">秒杀订单详情</div>
            <table class="table" id="goodslist">
                <tr>
                    <td>商品名称</td>
                    <td id="goodName" colspan="3"></td>
                </tr>
                <tr>
                    <td>商品图片</td>
                    <td colspan="2"><img id="goodsImage" width="200" height="200"/></td>
                </tr>
                <tr>
                    <td>订单价格</td>
                    <td colspan="2" id="orderPrice"></td>
                </tr>
                <tr>
                    <td>下单时间</td>
                    <td colspan="2" id="order_date"></td>
                </tr>
                <tr>
                    <td>订单状态</td>
                    <td id="orderStatus">
                        <!--<span if="${orderInfo.status eq 0}">未支付</span>
                        <span if="${orderInfo.status eq 1}">待发货</span>
                        <span if="${orderInfo.status eq 2}">已发货</span>
                        <span if="${orderInfo.status eq 3}">已收货</span>
                        <span if="${orderInfo.status eq 4}">已退款</span>
                        <span if="${orderInfo.status eq 5}">已完成</span>-->
                    </td>
                    <td>
                        <button class="btn btn-primary btn-block" type="submit" id="payButton">立即支付</button>
                    </td>
                </tr>
                <tr>
                    <td>收货人</td>
                    <td colspan="2" id="userName">收件人</td>
                </tr>
                <tr>
                    <td>手机号码</td>
                    <td colspan="2" id="userId">手机号码</td>
                </tr>
                <tr>
                    <td>收货地址</td>
                    <td colspan="2" id="userAddress">收货地址</td>
                </tr>
            </table>
        </div>
        <script>
            $(function () {
                getDetails();
            });

            // 发送 ajax 请求 获取数据
            function getDetails() {
                var orderId = g_getQueryString("orderId")
                $.ajax({
                    url: "/order/get/order/info/by/" + orderId,
                    type: "GET",
                    success: function (response) {
                        // 响应码是 200000 表示请求成功
                        if (response.code == 200000) {
                            // 成功渲染页面
                            render(response.data);
                        } else {
                            layer.msg(response.msg);
                        }
                    },
                    error: function () {
                        layer.msg("客户端请求有误");
                    }
                });
            }

            // 渲染页面数据
            function render(detail) {
                var user = detail.user;
                var orderInfo = detail.orderInfo;
                var goodsVo = detail.goodsVo;
                var address = detail.address;

                if (!user) {
                    $("#userIsNull").show();
                    $("#userIsNotNull").hide();
                }
                $("#userIsNull").hide();
                $("#userIsNotNull").show();
                $("#userNickname").text(user.nickname);
                $("#userPhone").text(user.id);


                $("#goodName").text(orderInfo.goodsName);
                $("#goodsImage").attr("src", goodsVo.goodsImage);
                $("#orderPrice").text(goodsVo.miaoshaPrice);
                $("#order_date").text(new Date(orderInfo.gmtCreated).format("yyyy-MM-dd hh:mm:ss"));

                if (orderInfo.status == 0) {
                    $("#orderStatus").text("未支付");
                } else if (orderInfo.status == 1) {
                    $("#orderStatus").text("待发货");
                } else if (orderInfo.status == 2) {
                    $("#orderStatus").text("已发货");
                } else if (orderInfo.status == 3) {
                    $("#orderStatus").text("已收货");
                } else if (orderInfo.status == 4) {
                    $("#orderStatus").text("已退款");
                } else if (orderInfo.status == 5) {
                    $("#orderStatus").text("已完成");
                }
                $("#userName").text(address.name);
                $("#userId").text(address.userId);
                $("#userAddress").text(address.addressDetail);
            }
        </script>
    </body>

</html>
